<template>
    <div id="linkRef"></div>
</template>

<script setup>
import { dia, shapes, layout, g } from "jointjs";
import "/node_modules/jointjs/dist/joint.css";

defineOptions({
    name: "Element",
});

const graph = ref(null);
const paper = ref(null);
const rectGroupList = ref([]);

// 创建图形和页面
function createGraph() {
    graph.value = new dia.Graph({}, { cellNamespace: shapes });
    paper.value = new dia.Paper({
        el: document.getElementById("linkRef"),
        model: graph.value,
        width: 600,
        height: 500,
        gridSize: 10,
        drawGrid: true,
        background: {
            color: "rgba(0, 255, 0, 0.3)",
        },
        cellViewNamespace: shapes,
    });
}

// 创建矩形
function createRect() {
    const rect = new shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: "blue",
            rx: 10,
            ry: 10,
            stroke: "tomato",
            strokeWidth: 2,
        },
        label: {
            text: "Hello",
            fill: "white",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect.addTo(graph.value);
    rectGroupList.value.push(rect);
    const rect2 = rect.clone();
    rect2.translate(300, 0);
    rect2.attr({
        label: {
            text: "World",
            fill: "pink",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect2.addTo(graph.value);
    rectGroupList.value.push(rect2);
}

// 创建连线
function createLink() {
    const link = new shapes.standard.Link();
    link.source(rectGroupList.value[0]);
    link.target(rectGroupList.value[1]);
    // 配置连线箭头样式，可以使用默认的箭头样式
    link.attr({
        line: {
            // 源节点箭头
            sourceMarker: {
                type: "path",
                d: "M 20 -10 0 0 20 10 Z",
            },
            // 目标节点箭头
            targetMarker: {
                type: "path",
                stroke: "green",
                strokeWidth: 2,
                fill: "yellow",
                d: "M 20 -10 0 0 20 10 Z",
            },
        },
    });
    // 创建连线label标签，不给偏移位置，默认label标签居于线中间，可以时图片文本，节点拖动时跟着移动
    link.labels([
        {
            position: {
                offset: {
                    x: 0,
                    y: 20,
                },
            },
            attrs: {
                text: {
                    text: "我是标签1",
                },
            },
        },
        {
            attrs: {
                text: {
                    text: "我是标签2",
                },
            },
        },
    ]);
    link.addTo(graph.value);
}

function complexLink(params) {
    var namespace = shapes;

    var graph = new dia.Graph({}, { cellNamespace: namespace });

    var paper = new dia.Paper({
        el: document.getElementById("linkRef"),
        model: graph,
        width: 600,
        height: 300,
        gridSize: 10,
        drawGrid: true,
        background: {
            color: "rgba(0, 255, 0, 0.3)",
        },
        cellViewNamespace: namespace,
    });

    var rect = new shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: "blue",
        },
        label: {
            text: "Hello",
            fill: "white",
        },
    });
    rect.addTo(graph);

    var rect2 = new shapes.standard.Rectangle();
    rect2.position(400, 30);
    rect2.resize(100, 40);
    rect2.attr({
        body: {
            fill: "#2C3E50",
            rx: 5,
            ry: 5,
            strokeWidth: 2,
        },
        label: {
            text: "World!",
            fill: "#3498DB",
            fontSize: 18,
            fontWeight: "bold",
            fontVariant: "small-caps",
        },
    });
    rect2.addTo(graph);

    var link = new shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.attr({
        line: {
            stroke: "blue",
            strokeWidth: 1,
            sourceMarker: {
                type: "path",
                stroke: "black",
                fill: "red",
                d: "M 10 -5 0 0 10 5 Z",
            },
            targetMarker: {
                type: "path",
                stroke: "black",
                fill: "yellow",
                d: "M 10 -5 0 0 10 5 Z",
            },
        },
    });
    link.labels([
        {
            attrs: {
                text: {
                    text: "Hello, World!",
                },
            },
        },
    ]);
    link.addTo(graph);

    var rect3 = new shapes.standard.Rectangle();
    rect3.position(100, 130);
    rect3.resize(100, 40);
    rect3.attr({
        body: {
            fill: "#E74C3C",
            rx: 20,
            ry: 20,
            strokeWidth: 0,
        },
        label: {
            text: "Hello",
            fill: "#ECF0F1",
            fontSize: 11,
            fontVariant: "small-caps",
        },
    });
    rect3.addTo(graph);

    var rect4 = new shapes.standard.Rectangle();
    rect4.position(400, 130);
    rect4.resize(100, 40);
    rect4.attr({
        body: {
            fill: "#8E44AD",
            strokeWidth: 0,
        },
        label: {
            text: "World!",
            fill: "white",
            fontSize: 13,
        },
    });
    rect4.addTo(graph);

    var link2 = new shapes.standard.Link();
    link2.source(rect3);
    link2.target(rect4);
    link2.vertices([
        new g.Point(250, 100),
        new g.Point(300, 150),
        new g.Point(350, 200),
    ]);
    link2.router("orthogonal");
    link2.connector("rounded");
    link2.attr({
        line: {
            stroke: "gray",
            strokeWidth: 4,
            strokeDasharray: "4 2",
            sourceMarker: {
                type: "image",
                "xlink:href":
                    "https://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png",
                width: 24,
                height: 24,
                y: -12,
            },
            targetMarker: {
                type: "image",
                "xlink:href":
                    "https://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png",
                width: 24,
                height: 24,
                y: -12,
            },
        },
    });
    link2.addTo(graph);

    var link3 = new shapes.standard.Link();
    link3.source(rect3);
    link3.target(rect4);
    link3.connector("jumpover", { size: 10 });
    link3.addTo(graph);

    var rect5 = new shapes.standard.Rectangle();
    rect5.position(100, 230);
    rect5.resize(100, 40);
    rect5.attr({
        body: {
            fill: "#2ECC71",
            strokeDasharray: "10,2",
        },
        label: {
            text: "Hello",
            fill: "black",
            fontSize: 13,
        },
    });
    rect5.addTo(graph);

    var rect6 = new shapes.standard.Rectangle();
    rect6.position(400, 230);
    rect6.resize(100, 40);
    rect6.attr({
        body: {
            fill: "#F39C12",
            rx: 20,
            ry: 20,
            strokeDasharray: "1,1",
        },
        label: {
            text: "World!",
            fill: "gray",
            fontSize: 18,
            fontWeight: "bold",
            fontVariant: "small-caps",
            textShadow: "1px 1px 1px black",
        },
    });
    rect6.addTo(graph);

    var link4 = new shapes.standard.Link();
    link4.source(rect5);
    link4.target(rect6);
    link4.attr({
        line: {
            stroke: "#3498DB",
            strokeWidth: 3,
            strokeDasharray: "5 5",
            strokeDashoffset: 7.5,
            sourceMarker: {
                type: "path",
                stroke: "none",
                fill: "#3498DB",
                d: "M 20 -10 0 0 20 10 Z \
                        M 40 -10 20 0 40 10 Z",
            },
            targetMarker: {
                type: "path",
                stroke: "none",
                fill: "#3498DB",
                d: "M 7.5 -10 2.5 -10 2.5 10 7.5 10 Z \
                        M 17.5 -10 12.5 -10 12.5 10 17.5 10 Z \
                        M 40 -10 20 0 40 10 Z",
            },
        },
    });
    link4.addTo(graph);
}

nextTick(() => {
    // 基础连线
    // createGraph();
    // createRect();
    // createLink();

    // 更加丰富的连线
    complexLink();
});
</script>
